<!DOCTYPE html>
<html lang=<%= I18n.locale %> dir= <%=I18nSupport.direction(I18n.locale) %>>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <%= display_meta_tags description: yield(:description).presence || Rails.configuration.site_description,
                          title: yield(:title).presence || "CircuitVerse - Digital Circuit Simulator" %>
    <meta name="keywords"
      content="Digital circuits, logisim, online, educational platform, karnaugh map, kmap, electronic devices and circuits,digital electronics basics,introduction to digital electronics, simple electronics projects for students,electric circuit analysis, logic circuits, logic simulation, digital logic circuits, boolean logic">
    <%= favicon_link_tag "favicon.ico" %>

    <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track": "reload" %>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap" rel="stylesheet">
    <%= csrf_meta_tags %>

    <%= javascript_include_tag "application_sprockets", "data-turbolinks-track": "reload" %>
    <%= javascript_include_tag "application", "data-turbolinks-track": "reload", defer: true %>

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <%= render partial: "layouts/google_analytics" if Rails.env.production? %>
    <%= stylesheet_link_tag "application" %>
  </head>

  <body class="d-flex flex-column min-vh-100">
  <%= render "layouts/header" %>
  <main class="flex-grow-1">
    <%= yield %>
  </main>
  <%= render(FooterComponent.new(current_user: current_user)) %>

  <!-- Custom Script for Alert -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      document.querySelectorAll('.alert').forEach(alert => {
        const bsAlert = new bootstrap.Alert(alert);
        if (!alert.classList.contains('alert-permanent')) {
          setTimeout(() => {
            alert.classList.add('fade');
            bsAlert.close();
          }, 3000);
        }
      });
    });
  </script>
</body>
</html>
